<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    :title="pageTlt"
    class="modal-dialog-wrapper"
    unmount-on-close
    :mask-closable="false"
    width="45vw"
  >
    <div class="main">
      <a-alert style="margin-bottom: 10px">下拉所选费项为通用费用中手动添加的费用名称</a-alert>
      <div class="main-tlt">{{ pageCon }}</div>
      <div class="main-list">
        <a-form :model="form">
          <div class="main-list-item" v-for="(item, index) in form.datas" :key="index">
            <a-form-item :field="`datas.${index}.itemName`">
              <a-select
                allow-clear
                :triggerProps="{ 'popup-container': '.model-filter' }"
                :style="{ width: '280px' }"
                placeholder="请输入"
                allow-search
                @clear="clearFn(index)"
                @change="updateDisabledStatus"
                v-model="item.itemName"
                :options="data"
              />

              <div class="main-icon" style="color: #ea0000; cursor: pointer" @click="del(index)" v-if="form.datas.length > 1">
                <SvgIcon name="main-delete" color="#ea0000" />
                删除
              </div>
              <div
                class="main-icon"
                style="color: #165dff; cursor: pointer"
                @click="add(item)"
                v-if="index + 1 == form.datas.length && form.datas.length < 20"
              >
                <SvgIcon name="sort-add" color="#165DFF" />
                新增
              </div>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { tenantCostConfig, tenantCostConfigSave, queryAllCustomItem } from '@/api/dashboard/revenueSummary'

  const showModal = ref(false)
  const pageTlt = ref('')
  const pageCon = ref('')
  const pageType = ref('')
  const data = ref([])
  // 默认form
  const form = ref({
    datas: [
      {
        itemName: '',
      },
    ],
  })

  const open = (title, content, type) => {
    pageTlt.value = title
    pageCon.value = content
    pageType.value = type
    showModal.value = true
    getDetail()
  }

  const getDetail = () => {
    tenantCostConfig({ type: pageType.value }).then((res) => {
      if (res.code == 200) {
        if (res.result.length) {
          form.value.datas = res.result
        } else {
          form.value.datas = [
            {
              itemName: '',
            },
          ]
        }
        getQueryAllCustomItem()
      }
    })
  }

  const getQueryAllCustomItem = () => {
    queryAllCustomItem({ type: pageType.value }).then((res) => {
      if (res.code == 200) {
        data.value = res.result.map((item, index) => {
          return {
            value: item,
            key: index++,
          }
        })
      }
      updateDisabledStatus()
    })
  }
  // 更新disabled状态
  const updateDisabledStatus = () => {
    // 获取所有已填写的名称
    const usedNames = form.value.datas
      .map((item) => item.itemName.trim()) // 去除前后空格
      .filter((itemName) => itemName !== '') // 过滤空值

    data.value = data.value.map((item) => {
      // 检查当前项的value是否存在于已使用的名称中
      const isDisabled = usedNames.includes(item.value)
      return { ...item, disabled: isDisabled }
    })
  }

  // 删除
  const del = (index) => {
    form.value.datas.splice(index, 1)
    updateDisabledStatus()
  }

  // 新增
  const add = () => {
    form.value.datas.push({
      itemName: '',
    })
    updateDisabledStatus()
  }

  const clearFn = (index) => {
    form.value.datas[index].itemName = ''
    updateDisabledStatus()
  }

  const resetFn = () => {
    form.value.datas = [
      {
        itemName: '',
      },
    ]
    updateDisabledStatus()
  }

  const onClose = () => {
    resetFn()
    showModal.value = false
  }

  const emit = defineEmits(['ok'])
  const onConfirm = () => {
    const params = form.value.datas.map((item) => ({ itemName: item.itemName })).filter((item) => item.itemName?.trim() !== '')
    tenantCostConfigSave({ type: pageType.value, list: params }).then((res) => {
      if (res.code == 200) {
        emit('ok', pageType.value, params)
        onClose()
      }
    })
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .main {
    color: #1d2129;
    height: 400px;
    .main-tlt {
      margin-bottom: 10px;
      font-weight: 400;
      font-size: 14px;
      color: #1d2129;
      line-height: 22px;
    }
    .main-list {
      display: flex;
      flex-direction: column;
      .main-list-item {
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .main-icon {
          margin-left: 22px;
        }
      }
    }
  }
  :deep(.arco-col-19) {
    flex: 0 0 100%;
    width: 100%;
  }
  :deep(.arco-col-5) {
    flex: 0 0 0;
    width: 0;
  }
  :deep(.main-list-item) {
    margin-bottom: 0 !important;
  }
</style>
